fix(site): stop mobile text being trimmed off-screen#30
Merged
Conversation
On narrow viewports (≤414px) real content was clipped on the right edge
instead of wrapping. Root cause was an interaction with the site-wide
`body { overflow-x: hidden }`, which turns any horizontal overflow into a
silent trim rather than a scrollbar:
- Landing: the `.capture` panel and `.proto-card` snippet (white-space:
nowrap) gave their grid items a large min-content, inflating the mobile
single-column `1fr` track's auto-minimum. That stretched the *hero text*
and *protocol-card text* columns past the viewport, where they were
clipped by `.hero { overflow: hidden }` ("sees" rendered as "see").
- Docs: `table.api td:first-child { white-space: nowrap }` plus long inline
`<code>` tokens (file paths, gradle tasks, Swift identifiers with no break
opportunities) pushed the API tables and surrounding text off-screen.
Fix (all scoped to the existing mobile breakpoints — desktop untouched):
- landing: let `.capture`/`.proto-card` shrink below min-content
(`min-width: 0`, `minmax(0,1fr)`); break long inline code in the
quickstart/agent/noop sections.
- docs: allow the first table column to wrap and break long inline code in
paragraphs, list items, table cells and callouts.
Verified at 360/390/414px (scrollWidth now equals viewport, zero overflow
drivers) and confirmed desktop (1280px) renders identically.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bug
On mobile widths (360–414px), the marketing + docs site trimmed/cut off text on the right edge instead of wrapping. Examples:
getting-started,ai-exports) had their second column pushed off-screen, and long inline<code>paths/identifiers overflowed.Root cause
The site sets
body { overflow-x: hidden }(style.css:56), which converts any horizontal overflow into a silent trim rather than a scrollbar. Two things were overflowing on mobile:grid-template-columns: 1fr=minmax(auto, 1fr). Theautominimum grows to the largest child's min-content. The.capturepanel and.proto-snippetusewhite-space: nowrap, giving them a ~407px min-content — which inflated the track and stretched the adjacent hero / card text columns past the viewport, where.hero { overflow: hidden }clipped them.table.api td:first-child { white-space: nowrap }plus long inline<code>tokens (SharinganExport.sessionJson(events),sharingan/build/XCFrameworks/release/Sharingan.xcframework,./gradlew :shared:embedAndSignAppleFrameworkForXcode) have no break opportunities, so they forced cells/paragraphs wider than the screen.Fix
Minimal CSS, entirely inside the existing mobile breakpoints (
@media (max-width: 880px)/860px) — desktop CSS is untouched:landing.css.hero-grid→minmax(0, 1fr)and.capture { min-width: 0 }so the panel shrinks below its nowrap min-content (rows still ellipsize — intended terminal look)..proto-card { min-width: 0 }so cards shrink and the code snippet scrolls inside (it already hasoverflow-x: auto).overflow-wrap: anywhereon inline code in the quickstart / agent / noop sections.docs.csstable.api td:first-child { white-space: normal }so function names wrap.overflow-wrap: anywhereon inline<code>in paragraphs, list items, table cells and callouts.Verification
Reproduced and fixed with Playwright at 360 / 390 / 414px on all four pages.
scrollWidth=433> viewport; hero text clipped ("see")scrollWidth=360; all text wraps/fitsscrollWidth=558; table + code clippedscrollWidth=360; cleanscrollWidth=460; PRODUCES column clippedscrollWidth=360; cleanZero remaining overflow drivers at all three widths. Desktop (1280px) confirmed visually identical (
scrollWidth == innerWidth), as expected since all changes are media-query-scoped.🤖 Generated with Claude Code